<!DOCTYPE html>
<html>
<head>
  <title>HTML landmark tests</title>
  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="../role.js"></script>
  <script type="application/javascript"
          src="../attributes.js"></script>

  <script type="application/javascript">

    function doTest()
    {
      // And some AT may look for this
      testAttrs("nav", {"tag" : "nav"}, true);
      testAttrs("header", {"tag" : "header"}, true);
      testAttrs("footer", {"tag" : "footer"}, true);
      testAttrs("article", {"tag" : "article"}, true);
      testAttrs("aside", {"tag" : "aside"}, true);
      testAttrs("section", {"tag" : "section"}, true);
      testAttrs("main", {"tag" : "article"}, true);
      testAttrs("form", {"tag" : "article"}, true);

      SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>
</head>
<body>

  <a target="_blank"
     title="Provide mappings for html5 <nav> <header> <footer> <article>"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=593368">
    Bug 593368
  </a><br/>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=613502"
     title="Map <article> like we do aria role article">
    Bug 613502
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=610650"
     title="Change implementation of HTML5 landmark elements to conform">
    Bug 610650
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=614310"
     title="Map section to pane (like role=region)">
    Mozilla Bug 614310
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=734982"
     title="Map ARIA role FORM">
    Bug 734982
  </a>
  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <nav id="nav">a nav</nav>
  <header id="header">a header</header>
  <footer id="footer">a footer</footer>
  <aside id="aside">by the way I am an aside</aside>
  <section id="section">a section</section>

  <article id="article">an article</article>
  <article id="main" role="main">a main area</article>
  <article id="form" role="form">a form area</article>

</body>
</html>
